<template>
  <vab-card class="width_100 box">
    <div class="flex_sb box_top">
      <span class="homeTitile">单品销售排行榜</span>
      <div class="time">
        <DateFiltering ref="dateFilteringRef" @selectDate="handleSelectDate" />
      </div>
    </div>
    <el-scrollbar v-loading="loading" height="358px">
      <aside
        class="flex"
        :class="{
          first: i == 0,
          second: i == 1,
          third: i == 2,
        }"
        v-for="(item, i) in rankingList"
        :key="i"
      >
        <div class="width_100 flex_sb" v-if="i < 3">
          <div class="flex">
            <img
              class="sort"
              :src="`${ossURlZjk}/dms/image/sort${i + 1}.png`"
              alt=""
            />
            <!-- <img class="productImg" :src="item.img_url || defaultImg" alt="" /> -->
            <span class="productName" :title="item.goods_name">
              {{ item.goods_name || '---' }}
            </span>
          </div>
          <span class="productNum">
            {{ NumberFormat(item.sales_num, 0) || 0 }}
          </span>
        </div>
        <div class="width_100 flex_sb" v-else>
          <div class="flex">
            <span class="defaultSort">{{ i + 1 }}</span>
            <span class="productName" :title="item.goods_name">
              {{ item.goods_name }}
            </span>
          </div>
          <span class="productNum">
            {{ NumberFormat(item.sales_num, 0) || 0 }}
          </span>
        </div>
      </aside>

      <el-empty v-if="!rankingList.length" description="暂无数据" />
    </el-scrollbar>
  </vab-card>
</template>

<script setup lang="ts">
  import { defaultImg, ossURlZjk } from '~/src/config'
  import DateFiltering from './DateFiltering.vue'
  import { NumberFormat, StrSplit } from '~/src/utils/utils'
  import { getOrderDetailRank } from '~/src/api/dms/home/homeCustomer'
  /**
   * @var
   */

  //
  const loading = ref(false)
  const dateFilteringRef = ref()
  const rankingList = ref<any>([])

  // 筛选时间
  const handleSelectDate = (row: any) => {
    // rankingList.value = []
    _getOrderDetailRank(row)
  }

  const _getOrderDetailRank = async ({ time, dataType }: any) => {
    loading.value = true

    try {
      let query = {
        dataType: dataType || 'week',
        startTime: dataType == 'custom' ? StrSplit(time, ' / ', 0) : '',
        endTime: dataType == 'custom' ? StrSplit(time, ' / ', 1) : '',
        month: dataType == 'month' ? time : '',
      }

      let res = await getOrderDetailRank({ ...query })

      rankingList.value = res.data

      setTimeout(() => {
        loading.value = false
      }, 500)
    } catch (error) {}
  }

  onMounted(() => {
    _getOrderDetailRank({})
  })
</script>

<style lang="scss" scoped>
  .box {
    :deep() {
      .el-card__body {
        padding: 16px 0 16px !important;
      }
      .el-scrollbar {
        padding: 0 24px;
      }
    }
  }
  .box_top {
    margin-bottom: 16px;
    margin-top: 8px;
    padding: 0px 24px;
  }

  aside {
    padding: 12px 16px 12px 26px;
    background: #00000005;
    border-radius: 8px;
    margin-bottom: 8px;

    .sort {
      display: inline-block;
      width: 24px;
      height: 28px;
      margin-right: 16px;
    }

    .productImg {
      display: inline-block;
      width: 52px;
      height: 52px;
      border-radius: 8px;
      margin-right: 8px;
    }

    .productName {
      display: inline-block;
      width: 260px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #000000a6;
      letter-spacing: 0;
      line-height: 22px;
      overflow: hidden; //溢出隐藏
      text-overflow: ellipsis; //省略号
      display: -webkit-box; //
      -webkit-box-orient: vertical; //设置弹性盒子的子元素的排列方式
      -webkit-line-clamp: 2; //设置显示文本的行数
    }

    .productNum {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #000000a6;
      letter-spacing: 0;
      text-align: right;
      line-height: 22px;
      max-width: 42px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .defaultSort {
      display: inline-block;
      font-family: AlibabaPuHuiTiM;
      font-size: 18px;
      color: #000000a6;
      letter-spacing: 0;
      text-align: center;
      line-height: 26px;
      margin-right: 22px;
    }

    &.first {
      padding: 12px 16px 12px 20px;
      background-image: linear-gradient(99deg, #fcf0bbb0 0%, #fefbe68c 98%);
      border-radius: 8px;

      .title {
        font-weight: 500;
      }
    }

    &.second {
      padding: 12px 16px 12px 20px;
      background-image: linear-gradient(90deg, #e6e7f685 0%, #e8e8f738 100%);
      border-radius: 8px;

      .title {
        font-weight: 500;
      }
    }

    &.third {
      padding: 12px 16px 12px 20px;
      background-image: linear-gradient(90deg, #ffbc963d 0%, #ffcfa929 100%);
      border-radius: 8px;

      .title {
        font-weight: 500;
      }
    }
  }
</style>
